﻿<template>
    <el-dialog
        title="客户模板"
        :close-on-click-modal="false"
        :visible.sync="visible"
        class="SHZY-dialog SHZY-dialog_center"
        lock-scroll
        width="70%"
    >
        <el-row class="SHZY-common-search-box" :gutter="24">
            <el-form @submit.native.prevent="">
                <el-col :span="6">
                    <el-form-item label="客户料号">
                        <el-input
                            v-model="query.materialCode"
                            placeholder="客户料号"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="search()"
                            >查询</el-button
                        >
                        <el-button icon="el-icon-refresh-right" @click="reset()"
                            >重置</el-button
                        >
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            @click="addOrUpdateHandle()"
                            style="float: right;"
                            >新增</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-table
            v-loading="listLoading"
            :data="list"
            height="450px"
            @sort-change="sortChange"
            custom-column
        >
            <el-table-column label="客户料号" prop="materialCode" align="left">
            </el-table-column>
            <el-table-column label="有效标志" prop="enabledMark" align="left">
                <template slot-scope="scope">
                    <el-tag
                        :type="
                            scope.row.enabledMark == '正常'
                                ? 'success'
                                : 'danger'
                        "
                        disable-transitions
                    >
                        {{
                            scope.row.enabledMark == "正常" ? "正常" : "停用"
                        }}</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="addOrUpdateHandle(scope.row.id)"
                        >编辑</el-button
                    >
                    <el-button
                        type="text"
                        @click="handleDel(scope.row.id)"
                        class="SHZY-table-delBtn"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize"
            @pagination="initData"
        />
        <br />
        <SHZY-Form v-if="formVisible" ref="SHZYForm" @refresh="refresh" />
    </el-dialog>
</template>
<script>
import request from "@/utils/request";
import SHZYForm from "./MaterialCustomerForm";

export default {
    components: { SHZYForm },
    data() {
        return {
            btnLoading: false,
            loading: false,
            visible: false,
            macode: undefined,
            materialId: "",
            query: {
                materialCode: undefined
            },
            list: [],
            listLoading: true,
            multipleSelection: [],
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: ""
            },
            formVisible: false,
            columnList: [
                { prop: "materialCode", label: "客户料号" },
                { prop: "enabledMark", label: "有效标志" }
            ]
        };
    },
    computed: {
        menuId() {
            return this.$route.meta.modelId || "";
        }
    },
    created() {
        this.initData();
    },
    methods: {
        init(id) {
            this.materialId = id;
            this.visible = true;
            this.$nextTick(() => {
                this.initData();
            });
        },
        sortChange({ column, prop, order }) {
            this.listQuery.sort = order == "ascending" ? "asc" : "desc";
            this.listQuery.sidx = !order ? "" : prop;
            this.initData();
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query,
                menuId: this.menuId,
                materialId: this.materialId
            };
            let query = {};
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join();
                } else {
                    query[key] = _query[key];
                }
            }
            request({
                url: `/api/BaseData/WmsBaseMaterialCustomer`,
                method: "GET",
                data: query
            }).then(res => {
                this.list = res.data.list;
                this.total = res.data.pagination.total;
                this.listLoading = false;
            });
        },
        handleDel(id) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                type: "warning"
            })
                .then(() => {
                    request({
                        url: `/api/BaseData/WmsBaseMaterialCustomer/${id}`,
                        method: "DELETE"
                    }).then(res => {
                        this.$message({
                            type: "success",
                            message: res.msg,
                            onClose: () => {
                                this.initData();
                            }
                        });
                    });
                })
                .catch(() => {});
        },
        addOrUpdateHandle(id) {
            this.formVisible = true;
            this.$nextTick(() => {
                this.$refs.SHZYForm.init(id, this.materialId);
            });
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "materialCode"
            };
            this.initData();
        },
        refresh(isrRefresh) {
            this.formVisible = false;
            if (isrRefresh) this.reset();
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined;
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: ""
            };
            this.initData();
        }
    }
};
</script>
